<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
  <!-- 引入 layui.css -->
    
     <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/01shouye.css">
  <link rel="stylesheet" href="/xiangmu/dist/layui/dist/css/layui.css">
 <link rel="stylesheet" href="/xiangmu/">
 <script src="/xiangmu/dist/layui/dist/layui.js"></script>
  <script src="../js/gather.js"></script>
  
  <script src="../js/jQuery/jquery.js"></script>
  <script src="../js/jQuery/jquery.min.js"></script>
  <script src="../js/utils(1).js"></script>
</head>

<body>
            
  <div id="guankuang"></div>
  <div class="toubu">
    <img src="../img/志豪1.png" alt="" style="width:300px; height: 100px;">


    <!-- 搜索引擎  -->
    <div class="box1">
      <input type="text" name="" id="">
      <button>搜索一下</button>
     
        <ul></ul>
    </div>
    <!-- 搜索引擎旁边的导航栏  -->
    <div class="layui-tab pang1">
      <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理 <a href=""></a></li>
        <li>个人中心<a href=""></a></li>
        <li>商品管理<a href=""></a></li>
        <li>我的订单<a href=""></a></li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">

          <br>
        </div>

      </div>
    </div>
  </div>

  <!-- 导航栏 -->
  <ul class="layui-nav  var1  layui-bg-cyan" lay-filter="">

    <li class="layui-nav-item"><a href="../html/02denglu.html">登录</a></li>
    <li class="layui-nav-item"><a href="../html/03zhuce.html">免费注册</a></li>
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">秒杀</a></li>
    <li class="layui-nav-item"><a href="">品牌闪购</a></li>
    <li class="layui-nav-item">
      <a href="javascript:;">优惠券</a>
      <dl class="layui-nav-child">
        <!-- 二级菜单 -->
        <dd><a href="">移动模块</a></dd>
        <dd><a href="">拍卖</a></dd>
        <dd><a href="">电商平台</a></dd>

      </dl>
    </li>
    <li class="layui-nav-item"><a href="">志豪 购！社区</a></li>
  </ul>

  <script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
      var element = layui.element;

      //…
    });
  </script>

  <div class="aaa2">
    <!-- 计时器 -->
    <div class="jishi1">
      <h2>距离双十一狂欢节还有多长时间^_^</h2>
      <span id="box"></span>
      <div class="ggg1">
      
<!--  循环动画，追加：layui-anim-loop -->
        <div class="layui-anim layui-anim-loop  sfd1"  >
         <img src="../img/imgs/01.jpg" alt="">
         <div class="pan"></div>
         <img src="../img/imgs/03.jpg" alt="">
         <div class="pan"></div>
      
        </div>
 </div>
    </div>
   
      <script>
      
        var q1 = new Date('2022-11-11 00:00:00')
        
        setInterval(function(){
        
            var q2 = new Date()
            
            var res = diffTime(q1,q2)
          
            var  str = `${res.day} 天 ${res.hours}小时${res.
                minutes} 分钟 ${res.seconds} 秒`
                box.innerText = str
               },1000)
          </script>

   
      <!-- 轮播图 -->
    <div class="lunbotu1">
      <div class="layui-carousel" id="test1">
        <div class="box11" carousel-item>
          <div><a href="https://www.jd.com/"><img src="../img/lp2.jpg" alt=""></a></div>
          <div><a href=""><img src="../img/lp5.jpg" alt=""></a></div>
          <div><a href=""><img src="../img/lp1.jpg" alt=""></a></div>
          <div><a href=""><img src="../img/lp7.jpg" alt=""></a></div>
          <div><a href=""><img src="../img/lp9.jpg" alt=""></a></div>
      </div>
     </div>
    </div>
  </div>
  <script>
    
    layui.use(['carousel', 'form'], function () {
      var carousel = layui.carousel;
      var layer = layui.layer;
      var form = layui.form;
      //建造实例
      carousel.render({
        elem: '#test1'
        , width: '100%' //设置容器宽度
        , height: '500px'
        , arrow: 'hover' //始终显示箭头
        ,interval:'3000'
        //,anim: 'updown' //切换动画方式
        // , indicator: 'none'
        // , autoplay: false

      });
    });
</script>
   <!-- 中间部位 -->
   <div class="zhong1">
    <li> 为您推荐</li>
   </div>
   <div class="zhong2">
     <div class="zhong3">
      <li><a href="" class="aqq1"> &nbsp;&nbsp; 精选</a>  <p>猜你喜欢</p></li>
      <li><a href="" class="aqq1">大电器城</a><p>大电器城</p></li>
      <li><a href="" class="aqq1">智能先发</a><p>品质生活</p></li>
      <li><a href="" class="aqq1">超市百货</a><p>百货生鲜</p></li>
      <li><a href="" class="aqq1">时尚达人</a><p>美妆穿搭</p></li>
      <li><a href="" class="aqq1">进口好物</a><p>志豪国际</p></li>
     </div>
   </div>
   
   <!-- 渲染 -->
   <!-- <script src="../js/xuanran.js"></script> -->
   <div class="kuan1">
     <div class="sss1">

      <a href="http://127.0.0.1:5500/xiangmu/src/html/05gouwuche.html" style="display: block; padding-top: 40px;   " >购物车</a>
      
      <a href="#guankuang" style="display: block;">回到 <br>顶部</a>
     </div>
     <div class="kuan2">
       <!-- 筛选大盒子 -->
       <div class="lim1 container">
         <div class="content category">
           <div class="left">
             分类
         
             </div>
             <ul class="right">
              <!-- js  渲染 -->
              

             </ul>
            </div>
            <div class="content filter">
              <div class="left">
                筛选
            
                </div>
                <ul class="right  filter">
                  <li data-type="" class=" filter_item  active">全部</li>
                  <li data-type="sale" class="filter_item">折扣</li>
                  <li data-type="hot" class="filter_item">热销</li>
                 
   
                </ul>
               </div>
               <div class="content sale">
                <div class="left">
                  折扣
              
                  </div>
                  <ul class="right  ">
                    <li data-type="10" class=" sale_item active">全部</li>
                    <li  data-type="5" class="sale_item">5</li>
                    <li  data-type="6" class="sale_item">6</li>
                    <li  data-type="7" class="sale_item">7</li>
                    <li  data-type="8" class="sale_item">8</li>
                   
     
                  </ul>
                 </div>
                 <div class="content search">
                  <div class="left">
                    搜索
                
                    </div>
                    <div class="right">
                      <input type="text">
                    </div>
                   </div>
                   <div class="content sort">
                    <div class="left">
                      排序
                  
                      </div>
                      <ul class="right">
                        <li data-type="id" data-method="ASC" class="sort_item active">综合升序</li>
                        <li  data-type="id" data-method="DESC" class="sort_item">综合降序</li>
                        <li  data-type="price" data-method="ASC" class="sort_item">价格升序</li>
                        <li  data-type="price" data-method="DESC" class="sort_item">价格降序</li>
                        <li  data-type="sale" data-method="ASC" class="sort_item">折扣升序</li>
                        <li  data-type="sale" data-method="DESC" class="sort_item">折扣降序</li>
                      </ul>
                     </div>
                     <div class="content pagenation">
                      <div class="left">  分页

                      </div>
                      
                      <div class="right">
                        <span class="left disable">&lt;</span>
                      <span class="total">1 / 50</span>
                      <span class="right">&gt;</span>
                      <select >
                        <option value="12">12</option>
                        <option value="16">16</option>
                        <option value="20">20</option>
                        <option value="24">24</option>
                      </select>
                      <input type="text" value="1">
                      <button class="go">跳转</button>
                      </div>
                     
                     </div>
         </div>
        
    </div>
     <!-- 商品列表主体内容 -->
     <div class="kuan3">
     <ul class="list">
      <li>
        <div class="show">
          <img src="" alt="">
          <span class="hot">HOT</span>
          <span class="sale">SALE</span>
        </div>
        <div class="info">
          <p class="title">大家都觉得经济的方法发，非佛法们纷纷么而非，凤飞飞</p>
          <p class="price">
            <span class="current">
              ￥500.00
            </span>
            <span class="old">
              ￥1500.00
            </span>
          </p>
          <p class="add">
            <button>加入购物车</button>
          </p>
        </div>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  
</div>





  <footer class="dibu1">底部</footer>
  <script src="../js/01shouye.js"></script>
  <script src="../js/xuanran.js"></script>
  <script src="../js/utils(1).js"></script>
  
  
</body>

</html>
